<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
    <style>
        /* 重置样式 */
        * {
            padding: 0;
            margin: 0;
        }

        /* 三个大盒子 */
        .box1,
        .box3,
        .box5 {
            float: left;
            width: 300px;
            height: 300px;
            border: 5px solid red;
            margin-right: 20px;
        }

        /* box2使用auto设置居中 */
        .box1 .box2 {
            width: 150px;
            height: 150px;
            background: pink;
            margin: 100px auto;
        }

        /* 设置box3和box5相对定位 */
        .box3,
        .box5 {
            position: relative;
        }

        /* box4绝对定位，移动50%，在使用margin或者transform拉回来一半距离 */
        .box3 .box4 {
            position: absolute;
            width: 150px;
            height: 150px;
            background: pink;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 和上面效果相同
            margin-top: -75px;
            margin-left: -75px; */
        }

        /* 我自己以前用的方法，比较简单，可以忽略宽高，自动适应 */
        .box5 .box6 {
            position: absolute;
            width: 150px;
            height: 150px;
            background: pink;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <!-- 建立三个盒子 -->
    <div class="box1">
        <div class="box2">我需要水平居中</div>
    </div>
    <div class="box3">
        <div class="box4">我要水平垂直居中</div>
    </div>
    <div class="box5">
        <div class="box6">我要水平垂直居中</div>
    </div>
</body>

</html>